<template>
	<view>
		<view class="wrap-bottom" :style="{paddingBottom: (distanceBottom > 30 ? distanceBottom : 30)}">
			<view class="bottom-bg">
				<view class="input-bg">
					<input class="input" v-model="content" type="text" placeholder="说点什么..." placeholder-class="place" confirm-type="send" @blur="onSend" />
				</view>
				
				<view class="item distance" @click="onGoods" v-if="isShowGoods">
					<image class="img" src="@/static/live/live_goods.png"></image>
				</view>
				
				<view class="item distance" @click="onLM" v-if="!isLMIng">
					<image class="img" src="@/static/look/lm.png"></image>
				</view>
				
				<view class="item distance" @click="onEndLM" v-if="isLMIng">
					<image class="img" src="@/static/live/live_end_lm.png"></image>
				</view>
				
				<view class="item distance" @click="onMore">
					<image class="img" src="@/static/look/more.png"></image>
				</view>
				
				<view class="item distance" @click="onGift">
					<image class="img" src="@/static/look/gift.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendMessage,
		yhApplyLM,
		endLM
	} from "@/api/newLive.js";
	import storage from "@/utils/storage";
	import st from "@/utils/showtoast.js";
	
	export default {
		data() {
			return {
				content: "",
				distanceBottom: uni.getSystemInfoSync()["safeAreaInsets"].bottom,
				isShowGoods: false,
				
				isLMIng: false, //是否正在连麦
			}
		},
		mounted() {
			uni.$on("zbAgreeLMNoticeLMYH", (info) => {
				if (info.user_id === storage.getUserID()) {
					this.isLMIng = true
				}
			})
			uni.$on("YHStartLook", () => {
				let goodsList = storage.getLiveRoomInfo()['goods']
				this.isShowGoods = goodsList.length > 0 ? true : false
			})
			uni.$on("onAndroidBackPress", () => {
				if (this.isLMIng) {
					this.onEndLM()
				}
				this.onDestroyed()
			})
			uni.$on("onSocketEndLM", () => {
				this.isLMIng = false
			})
		},
		methods: {
			/**
			 * 销毁
			 */
			onDestroyed() {
				uni.$off("YHStartLook")
				uni.$off("onAndroidBackPress")
				uni.$off("zbAgreeLMNoticeLMYH")
				uni.$off("onSocketEndLM")
			},
			/**
			 * 发送消息
			 */
			onSend() {
				if (this.content == "") {
					return
				}
				sendMessage({
					content: this.content,
					live_id: storage.getLiveRoomInfo().id
				}).then(res => {
					this.content = ""
				}).catch(res => {
					st.show(res.msg)
				})
			},
			/**
			 * 商品列表
			 */
			onGoods() {
				uni.$emit("YHShowGoods")
			},
			/**
			 * 连麦
			 */
			onLM() {
				uni.showActionSheet({
					title: "选择跟主播连麦方式",
					itemList: ["视频连麦", "语音连麦"],
					success: res => {
						this.applyLMData(res.tapIndex + 1)
					}
				})
			},
			/**
			 * 申请连麦
			 */
			async applyLMData(type) {
				let res = await yhApplyLM(storage.getLiveRoomInfo().id, type)
				st.show("申请成功,等待主播确认邀请")
			},
			/**
			 * 更多
			 */
			onMore() {
				uni.$emit("YHShowReport")
			},
			/**
			 * 礼物
			 */
			onGift() {
				uni.$emit("YHShowGift")
			},
			/**
			 * 结束连麦
			 */
			async onEndLM() {
				let res = await endLM(storage.getLMItemID(), storage.getLiveRoomInfo().id)
				storage.clearLMItemID()
				this.isLMIng = false
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wrap-bottom {
		width: 750rpx;
		padding-bottom: 44rpx;
		overflow: hidden;
		background-color: transparent;
	}
	.bottom-bg {
		width: 750rpx;
		height: 76rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}
	.input-bg {
		flex: 1;
		height: 76rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 38rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 28rpx;
	}
	.input {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		color: white;
	}
	.place {
		color: white;
	}
	
	.item {
		width: 76rpx;
		height: 76rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.img {
		width: 76rpx;
		height: 76rpx;
	}
	.zw {
		flex: 1;
		overflow: hidden;
	}
	
	.distance {
		margin-left: 20rpx;
	}
</style>